<template>
        <div>
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <el-form :model="queryParams" :inline="true" ref="queryFormRef">
                <el-form-item label="选择查询时间" prop="date">
                    <el-date-picker v-model="queryParams.date" placeholder="年/月/日" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
            </el-form>
        </transition>
        <el-card shadow="never">
            <el-table :data="productList">
                <el-table-column label="产品大类" prop="productCategoriesName" align="center"></el-table-column>
                <el-table-column label="产品小类" prop="productSubcategoryName" align="center"></el-table-column>
                <el-table-column label="产品名称" prop="productName" align="center"></el-table-column>
                <el-table-column label="库存数量" prop="inventoryNumber" align="center"></el-table-column>
                <el-table-column label="单价" align="center">
                    <template #default="scope">
                        <span style="line-height: 10">{{ `￥${scope.price}` }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="库存金额" align="center">
                    <template #default="scope">
                        <span>{{ `￥${scope.price * scope.inventoryNumber}` }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="最低库存" prop="lowInventoryNumber" align="center"></el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getSnapshotList" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { getSnapshotListApi } from '@/api/sj/warehouse/snapshots/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryFormRef = ref<FormInstance>();

const { nowDate } = defineProps(['nowDate']);
interface queryParamsType extends PageQuery{
    date?: string;
    type: number;
};

interface dataType <T>{
    queryParams: T
};

const data = reactive<dataType<queryParamsType>>({
    queryParams: {
        date: undefined,
        type: 2,
        pageNum: 1,
        pageSize: 30
    }
});

const productList = ref<any[]>([]);
const totalData = ref(0);

const { queryParams } = toRefs(data);

const getSnapshotList = async () => {
    const { data } = await getSnapshotListApi(queryParams.value);
    productList.value = data.records;
    totalData.value = data.total;
};

onMounted(()=>{
    // queryParams.value.date = nowDate;
    getSnapshotList();
});
</script>

<style lang="scss" scoped>

</style>